<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">
    <el-card style="margin:20px;border-radius:5px; background-color: #fff;">
      <!-- 表单 -->
      <el-form
        ref="form"
        :model="formData"
        label-width="100px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="车辆选择"
              label-width="80px"
              prop="truckTypeId"
            >
              <el-select
                v-model="formData.truckTypeId"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in carSelectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="车牌号码"
              prop="licensePlate"
            >
              <el-input
                v-model="formData.licensePlate"
                placeholder="请输入车牌号码"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="display:flex;justify-content:flex-start">
              <el-button
                type="warning"
                @click="search"
              >搜索</el-button>
              <el-button
                size="large"
                @click="reset"
              >重置</el-button>
            </el-form-item></el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 切换 -->
    <el-row style="margin:20px;border-radius:5px; background-color: #fff;">
      <el-col :span="2">
        <el-button
          type="text"
          style=" width: 120px;  height: 48px;"
          :class="{ active: type === 'all' }"
          @click="tabClick('all')"
        >全部{{ useCount + disableCount }}</el-button>
      </el-col>
      <el-col :span="2">
        <el-button
          type="text"
          style=" width: 120px; height: 48px;color:black"
          :class="{ active: type === 'use' }"
          @click="tabClick('use')"
        >可用{{ useCount }}</el-button>
      </el-col>
      <el-col :span="2">
        <el-button
          :class="{ active: type === 'stop' }"
          type="text"
          style=" width: 120px;  height: 48px;color:black"
          @click="tabClick('stop')"
        >停用{{ disableCount }}</el-button>
      </el-col>
    </el-row>

    <el-card
      style="margin:20px;border-radius:5px;background-color:#fff;padding:20px"
    >
      <!-- 按钮 -->
      <el-button
        type="danger"
        style="margin-bottom:10px;"
        @click="addCar"
      >新增车辆</el-button>
      <!-- table -->
      <el-table
        style="width:100%;max-height=250"
        :data="vehicleList"
      >
        <el-table-column
          fixed
          label="序号"
          width="100"
        >
          <template v-slot="{ row }">
            {{ vehicleList.indexOf(row) + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="licensePlate"
          label="车牌号码"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="truckTypeName"
          label="车辆类型"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="driverNum"
          label="司机数量"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="workStatus"
          label="车辆状态"
          width="120"
        >
          <template v-slot="{ row }">
            <span>{{ row.workStatus === 0 ? '停用' : '可用' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceGpsId"
          label="GPS设备ID"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="allowableLoad"
          label="实载重量(T)"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="allowableVolume"
          label="实载体积(方)"
          width="200"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
        >
          <template v-slot="{ row }">
            <el-button
              type="text"
              size="small"
              @click="$router.push({path:'/transit/vehicle-detail',query:{id:row.id,formUrlName:'车辆管理'}})"
            >查看详情<span style="margin:0 0 0 3px;"> | </span>
            </el-button>
            <!-- <el-button
              type="text"
              size="small"
            >启用<span style="margin:0 3px;"> | </span>
            </el-button>
            <el-button
              type="text"
              size="small"
            >停用<span style="margin:0 3px;"> | </span>
            </el-button> -->

            <!-- <el-button
              v-if="row.workStatus === 0"
              type="text"
              size="small"
            >启用 <span style="margin:0 5px;"> | </span>
            </el-button>

            <el-button
              v-else
              type="text"
              size="small"
            >停用 <span style="margin:0 5px;"> | </span>
            </el-button> -->
            <el-link
              :type=" row.workStatus === 0?'primary':'danger'"
              :underline="false"
              @click="initiate(row.id,row.workStatus)"
            >{{ row.workStatus === 0?'启用 |':'停用 |' }}</el-link>
            <el-button
              type="text"
              size="small"
              @click="arrange(row)"
            >配置司机</el-button>

          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-row
        align="middle"
        type="flex"
        justify="center"
      >
        <el-pagination
          :current-page.sync="pageParams.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageParams.pageSize"
          layout=" total, sizes, prev, pager, next, jumper"
          :total="pageParams.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-row>
    </el-card>

    <!-- 新增子组件 -->
    <AddVehicle
      :add-show-dialog.sync="addShowDialog"
      @updateCarList="getVehicleList"
    ></AddVehicle>

    <!-- 车辆启用 停用弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="carUsedialog"
      width="30%"
    >
      <template v-if="pageParams.workStatus===1">

        <div class="display:flex;flex:1 ">
          <p>确定要启用吗？车辆启用需满足以下条件：</p>
          <p><span>1.车辆信息已完善</span><span>2.绑定司机>=2,且有排版</span></p>
        </div>
      </template>
      <template v-else>
        <p>确定要停用吗？车辆停用需满足以下条件：</p>
        <span>1.车辆当前无运输任务</span><span>2.车辆无关联运输路线</span>
        <p style="color:orange">注：停用后司机将自动解除绑定</p>
      </template>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="btnCancel">取 消</el-button>
        <el-button
          type="warning"
          @click="btnCarOk"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 配置司机 -->
    <template>
      <el-dialog
        title="车辆配置"
        :visible.sync="arrangedialog"
        width="30%"
      >
        <p>配置司机需满足以下条件：</p>
        <span>1.车辆信息已完善</span><span>2.车辆未完成运输任务</span>

        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="btnArrangeCancel">取 消</el-button>
          <el-button
            type="warning"
            @click="btnArrangeOk"
          >确 定</el-button>
        </span>
      </el-dialog>
    </template>

    <DriverArrange
      ref="dialogShow"
      :drivers-list="driversList"
      :title-info="titleInfo"
      :form-base-ad="formBaseAd"
      :car-modal-info="carModalInfo"
    ></DriverArrange>
  </div>
</template>
<script>
import AddVehicle from './components/vehicle-add.vue'
// , getDriverListByCar
import { truckList, getCarTypeList, getCarTypeStatics, truckStatusUse, truckStatusNoUse } from '@/api/transit'
import DriverArrange from './components/arrange-driver.vue'
export default {
  name: 'Vehicle',
  components: {
    AddVehicle,
    DriverArrange

  },
  data() {
    return {
      vehicleList: [],
      carSelectList: [],
      disableCount: 0,
      useCount: 0,
      type: 'all',
      formData: {
        truckTypeId: '', // 车辆类型id
        licensePlate: '' // 车牌号
      },
      pageParams: {
        page: 1,
        pageSize: 10,
        workStatus: null,
        total: 0
      },
      addShowDialog: false,
      carUsedialog: false,
      title: '',
      id: '', // 启用停用
      arrangedialog: false,
      // iid: '', // 配置司机
      // dialogFormVisible: false, // 配置司机弹窗
      titleInfo: {},
      formBaseAd: {},
      carModalInfo: {},
      driversList: []

    }
  },
  created() {
    // 车辆列表
    this.getVehicleList()
    // 下拉车辆类型列表
    this.getCarTypeList()
    // 统计车辆数量
    this.getCarTypeStatics()
  },
  methods: {
    // 获取下拉车辆类型
    async getCarTypeList() {
      const car = await getCarTypeList()
      // console.log('下拉车辆类型', car)
      this.carSelectList = car.data
    },
    // 统计车辆数量
    async getCarTypeStatics() {
      const carCount = await getCarTypeStatics()
      console.log('carCount', carCount)
      this.useCount = +carCount.data[1]
      this.disableCount = +carCount.data[0]
    },
    // 获取车辆列表
    async getVehicleList() {
      const res = await truckList(this.pageParams)
      console.log(res, '444444')
      this.vehicleList = res.data.items
      // console.log(this.vehicleList, '1312')
      this.pageParams.total = +res.data.counts
      this.pageParams.page = res.data.page
      this.pageParams.pageSize = res.data.pageSize
    },
    // 每页条数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pageParams.pageSize = val
      this.getVehicleList()
    },
    // 当前页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.pageParams.page = val
      this.getVehicleList()
      // console.log(this.pageParams);
    },
    search() {
      this.pageParams = { ...this.pageParams, ...this.formData }
      this.getVehicleList()
    },
    reset() {
      this.$refs.form.resetFields()
    },
    async tabClick(type) {
      this.type = type
      if (type === 'all') {
        // console.log('all')
        this.pageParams.workStatus = null
        this.getVehicleList()
      } else if (type === 'use') {
        console.log('use')
        this.pageParams.workStatus = 1
        this.getVehicleList()
      } else {
        // console.log('stop')
        // const stopcarList = await truckList({ page: this.pageParams.page, pageSize: this.pageParams.pageSize, workStatus: '1' })
        // this.vehicleList = stopcarList.data.items
        // this.getVehicleList()
        this.pageParams.workStatus = 0
        this.getVehicleList()
      }
    },
    // 新增车辆
    addCar() {
      this.addShowDialog = true
    },
    // 启用
    initiate(id, workStatus) {
      this.carUsedialog = true
      // console.log(id, '666666666666')
      this.id = id
      this.pageParams.workStatus = workStatus
      // console.log(id, 'dfghjkl;')
      if (this.pageParams.workStatus === 0) {
        this.title = '启用车辆'
        // console.log(this.pageParams.workStatus, '1321')
      } else {
        this.title = '停用车辆'
      }
    },
    async btnCarOk() {
      if (this.title === '启用车辆') {
        const res = await truckStatusUse(this.id)
        // console.log('res启用', res)
        this.carUsedialog = false
        this.$message(res.msg)
      } else {
        const res = await truckStatusNoUse(this.id)
        // console.log(res, '22222222222222')
        this.carUsedialog = false
        this.$message(res.msg)
      }
    },
    // 取消
    btnCancel() {
      this.carUsedialog = false
      this.$message('已取消')
    },
    // 配置司机弹框
    async arrange(row) {
      this.carModalInfo = row
      this.arrangedialog = true
      // this.driversList = await getDriverListByCar(iid)
    },
    // 配置司机确定
    async btnArrangeOk() {
      this.arrangedialog = false
      this.$refs.dialogShow.dialogFormV()
      // this.$nextTick(async() => {
      //   await getDriverListByCar()
      // })
    },
    btnArrangeCancel() {
      this.arrangedialog = false
      this.$message('已取消')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
.vehicle /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

.vehicle {
  /deep/ .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  /deep/ .el-dialog__body {
    text-align: center;
    padding: 20px 20px 0px 20px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}
</style>

<style>
.startconfirm {
  width: 481px;
}
.startconfirm .el-message-box__header {
  padding-bottom: 4px;
}
.startconfirm .el-message-box__container {
  margin-bottom: 15px;
}
.confirm .el-message-box__status.el-icon-warning {
  left: 70px;
}
.confirm.el-message-box__title {
  font-size: 16px;
}
.confirm .el-message-box__message p {
  color: #f92d2d;
  margin-top: 5px;
}
.confirm .el-message-box__btns {
  text-align: center;
  margin-top: 10px;
}
</style>
<style scoped>
.tab-change {
  display: flex;
  border-radius: 4px;
  margin: 20px;
  border-radius: 5px;
  background-color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.tab-item {
  width: 120px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  color: #333;
}
.active {
  width: 120px;
  height: 48px;
  background-color: #ffeeeb;
  color: #e15536;
}
</style>
